import React, { useState, useRef, useEffect } from 'react';
import { getQueryString } from './utils';
import styles from './index.less';
import '../global.css';
import {
  Tag,
  Space,
  Popover,
  // Pagination,
  Modal,
  Tree,
  Checkbox,
  Radio,
  Form,
  Button,
  message,
  Popconfirm,
  Input,
  Upload,
} from 'antd';
import {
  DownOutlined,
  CaretDownOutlined,
  FolderOpenOutlined,
  SettingOutlined,
  CloseOutlined,
  PlusSquareOutlined,
  PlusOutlined,
  CheckOutlined,
  PictureOutlined,
  ArrowDownOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  ArrowUpOutlined,
  ExclamationCircleOutlined,
  CloseCircleOutlined,
} from '@ant-design/icons';
import {
  searchAttributesOptions,
  tagsOptions,
  tagsOptions2,
  filterLevelOptions,
  filterSetInfoOptions,
  filterColorOptions,
  filterOptionsArr,
} from './contant';
import {
  findAllForFirstLevel,
  findByPage,
  findAllFolder,
  queryCount,
  queryAllFolderDelete,
  queryAllFileDelete,
  queryFileDetail,
  queryFileTags,
  deleteFileTag,
  batchDeleteComplete,
  batchRestore,
  batchDelete,
  deleteSource,
  saveResource,
  updateFileDetail,
  updateRemarks,
  addFolderRequest,
  batchUploadFile,
  findById,
  updateSearchSet,
  getAllTags,
  updateConfig2,
  updateOnlyImg,
  saveTags,
} from './services';
const { confirm } = Modal;
const ColorComponents = ({ value, onChange }) => {
  return (
    <div>
      <p className={styles.attribute_title_type}>颜色</p>
      <div className={styles.color_type}>
        {filterColorOptions.map((item) => (
          <p
            style={{
              background: item.value,
              marginTop: item.value === value ? '-10px' : '0px',
            }}
            onClick={() => {
              if (onChange) {
                onChange(item.value);
              }
            }}
          />
        ))}
      </div>
    </div>
  );
};
const limit = 10000;
export default () => {
  const [form] = Form.useForm();
  const [fileForm] = Form.useForm();
  const [filterData, setFilterData] = useState(filterOptionsArr);
  const uploadFolderRef = useRef();
  const [page, setPage] = useState(1);
  const [searchSetVisible, setSearchSetVisible] = useState(false);
  const [filterSetVisible, setFilterSetVisible] = useState(false);
  const [filterSelectVisible, setFilterSelectVisible] = useState(false);
  const [selectColor, setSelectColor] = useState();
  const [filterTagsList, setFilterTagsList] = useState([]);
  const [selectFilterSet, setSelectFilterSet] = useState({
    filterLevel: ['1'],
  });
  const [searchSetInitValue, setSearchSetInitValue] = useState({
    attributes: ['fileName'],
    tags: [],
  });
  const rightRef = useRef();
  const [leftHeight, setLeftHeight] = useState(67);
  const [selectFilterShowType, setSelectFilterShowType] = useState([]);
  const [selectFilterChildrenData, setSelectFilterChildrenData] = useState([]);
  const [treeShow, setTreeShow] = useState(false);
  const [big, setBig] = useState(false);
  const [addTagsVisible, setAddTagsVisible] = useState(false);
  // 数据
  const [inputValue, setInputValue] = useState('');
  const [findAllForFirstLevelData, setFindAllForFirstLevelData] = useState([]);
  const [allFolderData, setFindAllFolderData] = useState();
  const [currentResource, setCurrentResource] = useState({});
  const [keyword, setKeyword] = useState();
  const [parentId, setParentId] = useState();
  const [currentFileData, setCurrentFileData] = useState({});
  const [currentFolderData, setCurrentFolderData] = useState({});
  const [treeData, setTreeData] = useState([]);
  const [countObj, setCountObj] = useState({});
  const [parentIdCache, setParentIdCache] = useState();
  const [isDelBtn, setIsDelBtn] = useState(false);
  const [hasTags, setHasTags] = useState('');
  const [params, setParams] = useState({});
  const [fileDetail, setFileDetail] = useState({});
  const [fileTags, setFileTags] = useState([]);
  const [deleteFileIds, setDeleteFileIds] = useState([]);
  const [currentSelectTreeId, setCurrentSelectTreeId] = useState();
  const [currentSelectParentId, setCurrentSelectParentId] = useState([]);
  const [historyParentId, setHistoryParentId] = useState([]);
  let [historyIndex, setHistoryIndex] = useState(0);
  const [tagsList, setTagsList] = useState([]);
  const [customName, setCustomName] = useState([]);
  const [currentBtnIds, setCurrentBtnIds] = useState(1);
  const [imgIsEdit, setImgIsEdit] = useState(false);
  const [currentTagIndex, setCurrentTagIndex] = useState(0);
  const [checkedTag, setCheckedTag] = useState({});
  const [isTagsManage, setIsTagsManage] = useState(false);
  const searchShowModal = () => {
    setSearchSetVisible(true);
  };

  const searchHandleOk = (e) => {
    updateSearchSet({
      config6: e.attributes.join(','),
      filePath: e.tags.join(','),
    }).then((res) => {
      setModalInitValues();
      message.success('更新成功');
    });
    setSearchSetVisible(false);
  };

  const searchHandleCancel = () => {
    setSearchSetVisible(false);
  };

  // 筛选逻辑

  const filterSetShowModal = () => {
    setFilterSetVisible(true);
  };

  const filterSetOk = (e) => {
    const filterSetInfo = {
      1: 'gs',
      2: 'fx',
      3: 'ys',
    };
    const _tags = {
      1: 'qx',
      2: 'zt',
      3: 'lx',
      4: 'cs',
    };
    const selectFilters = [];
    const _filterSetInfo = e.filterSetInfo || [];
    const _tags2 = e.tags || [];
    _filterSetInfo.map((k) => {
      k && selectFilters.push(filterSetInfo[k]);
    });
    _tags2.map((k) => {
      k && selectFilters.push(_tags[k]);
    });
    console.log(selectFilters);
    setSelectFilterShowType(selectFilters);
    setSelectFilterSet(e);
    setFilterSetVisible(false);
    setFilterSelectVisible(true);
    updateConfig2({
      config3: e.filterLevel.join(','),
      config4: e.tags.join(','),
      config5: e.filterSetInfo.join(','),
    });
  };

  const filterBackSet = () => {
    setFilterSetVisible(true);
    setFilterSelectVisible(false);
  };

  const filterSetCancel = () => {
    setFilterSetVisible(false);
  };

  const filterSelectOk = (e) => {
    console.log(e);
    setFilterTagsList(Object.values(e));
    setFilterSelectVisible(false);
  };

  const filterSelectCancel = () => {
    setFilterSelectVisible(false);
  };

  const addTags = () => {
    setAddTagsVisible(true);
    setIsTagsManage(false);
  };
  const closeTags = () => {
    setAddTagsVisible(false);
  };
  const getFileCount = async () => {
    const countData = await queryCount();
    setCountObj({ ...countData.data });
  };
  const findAllForFirstLevelFn = async () => {
    const findAllForFirstLevelData = await findAllForFirstLevel();
    getFileCount();
    setFindAllForFirstLevelData(findAllForFirstLevelData?.data || []);
    const firstResource = findAllForFirstLevelData?.data[0];
    const _id = window.localStorage.getItem('parentId') || firstResource.id;
    params.parentId = _id;
    setParams({ ...params });
    setCurrentSelectTreeId({
      id: _id,
      parentId: '0',
    });
    setParentIdCache(_id);
    const _data = JSON.parse(window.localStorage.getItem('currentResource'));
    setCurrentSelectParentId([_data.id || firstResource.id]);
    setCurrentResource({ ..._data } || { ...firstResource });
  };
  const setModalInitValues = () => {
    findById().then((res) => {
      setSearchSetInitValue({
        tags: res?.data?.filePath?.split(','),
        attributes: res?.data?.config6?.split(','),
      });
      setSelectFilterSet({
        filterLevel: res?.data?.config3.split(','),
        tags: res?.data?.config4.split(','),
        filterSetInfo: res?.data?.config5.split(','),
      });
    });
  };
  const formatTreeDataWithPid = (treeData, rootNodeList = []) => {
    const keyNodes = {};
    const nodeList = treeData.map((tree) => {
      const clone = { ...tree };
      const key = clone['id'];
      keyNodes[key] = clone;
      clone.key = clone.key || key;
      return clone;
    });

    nodeList.forEach((node) => {
      const parentKey = node['parentId'];
      const parent = keyNodes[parentKey];
      if (parent) {
        parent.children = parent.children || [];
        parent.children.push(node);
      }
      if (parentKey === '0') {
        rootNodeList.push(node);
      }
    });
    return rootNodeList;
  };
  const getAllTagsFn = () => {
    getAllTags().then((res) => {
      const resData = formatTreeDataWithPid(res.data);
      function _dataFn(arr) {
        arr.map((s, i) => {
          s.value = s.propertyName;
          s.label = s.propertyName;
          if (s.children && s.children.length > 0) {
            _dataFn(s.children);
          } else {
            s.children = [];
          }
        });
        return arr;
      }
      setTagsList([..._dataFn(resData)]);
      setFilterData([..._dataFn(resData), ...filterData]);
    });
  };
  useEffect(() => {
    window.localStorage.setItem('token', getQueryString('token'));
    // setLeftHeight(rightRef.current.clientHeight);
    findAllForFirstLevelFn();
    setModalInitValues();
    getAllTagsFn();
  }, []);
  const treeFn = (da) => {
    const _treeChildren = da.map((s) => {
      s.key = s.id;
      s.fileName = s.title;
      s.title = () => treeTitle(s, s.children.length);
      if (s.children.length > 0) {
        treeFn(s.children);
      }
      return s;
    });
    return _treeChildren;
  };
  const _initTree = async () => {
    const findAllFolderData = await findAllFolder(currentResource.id);
    const _data = findAllFolderData?.data || [];
    const _newTree = [
      {
        id: currentResource.id,
        key: currentResource.id,
        parentId: currentResource.parentId,
        title: () => treeTitle(currentResource, _data.length),
        children: treeFn(_data),
      },
    ];
    setTreeData([..._newTree]);
  };
  useEffect(() => {
    _initTree();
  }, [currentResource]);
  const _initfn = async () => {
    const findByFilePageData = await findByPage({
      parentId: params.parentId,
      page: 1,
      limit,
      folderFlag: 1,
      keyword: params.keyword || '',
      hasTags: params.hasTags,
      fileName: params.fileName,
    });
    const findFloderByPageData = await findByPage({
      parentId: params.parentId,
      page: 1,
      limit,
      folderFlag: 2,
    });
    setCurrentFileData({ ...findByFilePageData });
    setCurrentFolderData({ ...findFloderByPageData });
  };
  useEffect(() => {
    _initfn();
  }, [params]);
  const imgContent = (item) => {
    return (
      <div className={styles.hover_content}>
        <div className={styles.big_img}>
          <img src={item.imgSaveName} />
        </div>
        <p className={styles.avatar}>
          <span>作者：</span>
          <span>{item.authorName}</span>
        </p>
        <p className={styles.avatar}>
          <span>系列：</span>
          <span></span>
        </p>
        <div className={styles.action}>
          <p onClick={() => {
            window.open(item.imgSaveName);
          }}>
            <ArrowDownOutlined style={{ fontSize: '22px' }} />
          </p>
          {/* <p>
            <PictureOutlined style={{ fontSize: '22px' }} />
          </p>
          <p>
            <PlusSquareOutlined style={{ fontSize: '22px' }} />
          </p> */}
        </div>
      </div>
    );
  };
  const treeTitle = (h, total) => (
    <div className={styles.tree_list}>
      <div className={styles.tree_list_left}>
        <img
          src={
            total === 0
              ? require('../img/nofile@2x.png')
              : require('../img/file@2x.png')
          }
          alt=""
        />
        <span>{h.fileName}</span>
      </div>
      <div className={styles.tree_list_right}>
        {/* <img src={require('../img/icon-add.png')} alt="" /> */}
        <span>{total * 1 !== 0 && total}</span>
      </div>
    </div>
  );
  const treeSelect = (selectedKeys, e) => {
    setCurrentSelectTreeId({
      id: selectedKeys[0],
      parentId: e.node.pid || '0',
    });
    const _id = e.node.pid ? e.node.pid : e.node.id;
    setHistoryParentId([...historyParentId, _id]);
    selectedKeys.length > 0 && (params.parentId = selectedKeys[0]);
    params.hasTags = null;
    setParams({ ...params });
  };
  const clickAll = () => {
    params.parentId = parentIdCache;
    params.hasTags = null;
    setParams({ ...params });
    setIsDelBtn(false);
  };
  const _queryDelete = async () => {
    const allFileDeleteData = await queryAllFileDelete();
    const allFolderDeleteData = await queryAllFolderDelete();
    const ids = [];
    allFolderDeleteData.data.map((i) => ids.push(i.id));
    allFileDeleteData.data.map((i) => ids.push(i.id));
    setDeleteFileIds([...ids]);
    setCurrentFileData({ list: allFileDeleteData.data });
    setCurrentFolderData({ list: allFolderDeleteData.data });
  };

  const _querySelectFileFolderIds = () => {
    const _ids = [];
    (currentFileData.list || []).map((i) => i.checked && _ids.push(i.id));
    (currentFolderData.list || []).map((i) => i.checked && _ids.push(i.id));
    return _ids;
  };

  const delClick = () => {
    _queryDelete();
    setIsDelBtn(true);
  };
  const noTagClk = () => {
    params.hasTags = 'hasNoData';
    setParams({ ...params });
    setIsDelBtn(false);
  };
  const addResource = () => {
    confirm({
      title: '新增资源库',
      icon: null,
      content: (
        <Form form={form}>
          <Form.Item label="资源库名称：" name="resource">
            <Input placeholder="请输入资源库名称" />
          </Form.Item>
        </Form>
      ),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        console.log(form.getFieldValue());
        if (!form.getFieldValue().resource) {
          message.error('请输入资源库名称');
          return;
        }
        saveResource({
          parentId: '0',
          fileName: form.getFieldValue().resource,
        }).then(() => {
          findAllForFirstLevelFn();
          window.localStorage.removeItem('parentId');
          window.localStorage.removeItem('currentResource');
          form.resetFields();
          message.success('资源库添加成功');
        });
      },
    });
  };
  const addFileCommon = (type) => {
    confirm({
      title: '新增文件夹',
      icon: null,
      content: (
        <Form form={fileForm}>
          <Form.Item label="文件夹名称：" name="fileName">
            <Input placeholder="请输入文件夹名称" />
          </Form.Item>
        </Form>
      ),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        if (!fileForm.getFieldValue().fileName) {
          message.error('请输入资源库名称');
          return;
        }
        addFolderRequest({
          parentId: currentSelectTreeId.id,
          fileName: fileForm.getFieldValue().fileName,
        }).then(() => {
          // findAllForFirstLevelFn();
          _initTree();
          _initfn();
          fileForm.resetFields();
          message.success('文件夹添加成功');
        });
      },
    });
  };
  const updateFileDetailClk = () => {
    updateFileDetail({
      authorName: fileDetail.authorName,
      customName: JSON.stringify(customName),
      fileName: fileDetail.fileName,
      id: fileDetail.id,
      series: fileDetail.series,
      source: fileDetail.source,
    }).then((res) => {
      message.success('保存成功');
    });
  };
  const getFileImgDetail = async (id) => {
    const _fileDeail = await queryFileDetail({ id });
    const _fileTags = await queryFileTags({
      archiveId: id,
    });
    setFileDetail({ ..._fileDeail.data });
    setFileTags([..._fileTags.data]);
    const _obj = {};
    [..._fileTags.data].map((item) => {
      _obj[item.parentId] = item.id;
    });
    setCheckedTag({ ..._obj });
    const _customName = _fileDeail.data.customName;
    setCustomName(_customName ? JSON.parse(_customName) : []);
  };
  const saveTagsFn = (p) => {
    p.map((s) => {
      s.archiveId = fileDetail?.id;
    });
    saveTags(p).then(() => {
      getFileImgDetail(fileDetail.id);
    });
  };
  return (
    <>
      <div className={styles.header}>
        <div className={styles.header_left}>
          <img
            onClick={addResource}
            src={require('../img/icon-menubtn.png')}
            alt=""
          />
          <ul>
            {findAllForFirstLevelData.map((item, index) => (
              <Popconfirm
                key={item.id}
                placement="bottom"
                title="是否删除"
                trigger="hover"
                onConfirm={() => {
                  deleteSource({ id: item.id }).then(() => {
                    message.success('删除成功');
                    window.localStorage.removeItem('parentId');
                    window.localStorage.removeItem('currentResource');
                    findAllForFirstLevelFn();
                  });
                }}
                okText="确定"
                cancelText="取消"
              >
                <li
                  className={item.id === params.parentId ? styles.active : ''}
                  onClick={() => {
                    window.localStorage.setItem('parentId', item.id);
                    window.localStorage.setItem(
                      'currentResource',
                      JSON.stringify(item),
                    );
                    params.parentId = item.id;
                    setParams({ ...params });
                    setCurrentResource({ ...item });
                    setIsDelBtn(false);
                  }}
                >
                  {item.fileName}{' '}
                  <span
                    style={{
                      display:
                        findAllForFirstLevelData.length - 1 === index && 'none',
                    }}
                  >
                    -
                  </span>
                </li>
              </Popconfirm>
            ))}
          </ul>
        </div>
        <div className={styles.header_right}>
          <img
            className={styles.logo}
            src={require('../img/logo@2x.png')}
            alt=""
          />
          <p>
            <img src={require('../img/admin@2x.png')} alt="" />
            <span>超级管理员</span>
          </p>
          <p>用户管理</p>
          <p>退出</p>
        </div>
      </div>
      <div className={styles.main}>
        <div className={styles.main_left}>
          <div className={styles.nav_action}>
            <div className={styles.action_left}>
              <img
                className={styles.tree_icon}
                src={require('../img/no_tree@2x.png')}
                alt=""
                onClick={() => setTreeShow(false)}
              />
              <img
                className={styles.tree_icon}
                src={require('../img/tree@2x.png')}
                alt=""
                onClick={() => setTreeShow(true)}
              />
              <div>
                <img src={require('../img/icon-all.png')} alt="" />
                <p onClick={clickAll}>
                  全部<span>{countObj?.count1}</span>
                </p>
              </div>
              <div onClick={noTagClk}>
                <img src={require('../img/no_tag@2x.png')} alt="" />
                <p>
                  未标签<span>{countObj?.count2}</span>
                </p>
              </div>
              <div onClick={delClick}>
                <img src={require('../img/del@2x.png')} alt="" />
                <p>
                  回收站<span>{countObj?.count3}</span>
                </p>
              </div>
            </div>
            <div className={styles.line} />
            <div className={styles.action_right}>
              <div className={styles.tags}>
                {filterTagsList.map((item) => (
                  <Tag key={item} closable onClose={() => {}}>
                    {item}
                  </Tag>
                ))}
              </div>
              <div className={styles.search}>
                <img src={require('../img/icon-more.png')} alt="" />
                <img
                  onClick={filterSetShowModal}
                  src={require('../img/sx@2x.png')}
                  alt=""
                />
                <div>
                  <img src={require('../img/serch@2x.png')} alt="" />
                  <input
                    value={inputValue}
                    onChange={(e) => {
                      setInputValue(e.target.value);
                    }}
                    onBlur={() => {
                      params.keyword = inputValue;
                      params.fileName = inputValue;
                      setParams({ ...params });
                    }}
                  />
                </div>
                <img
                  onClick={searchShowModal}
                  className={styles.set}
                  src={require('../img/set@2x.png')}
                  alt=""
                />
              </div>
            </div>
          </div>
          <div className={styles.file_pic}>
            {treeShow && (
              <div className={styles.tree_box}>
                <div className={styles.tree_head}>
                  <Popover
                    arrowPointAtCenter
                    placement="right"
                    onVisibleChange={() => {
                      console.log(uploadFolderRef);
                      uploadFolderRef.current.setAttribute(
                        'webkitdirectory',
                        '',
                      );
                      uploadFolderRef.current.setAttribute('directory', '');
                      uploadFolderRef.current.setAttribute('multiple', '');
                    }}
                    content={
                      <div className={styles.upload_submit}>
                        <span onClick={() => addFileCommon(1)}>新建文件夹</span>{' '}
                        OR{' '}
                        <span>
                          上传文件夹{' '}
                          <input
                            ref={uploadFolderRef}
                            className={styles.upload_folder}
                            name="dir"
                            id="dir_input"
                            type="file"
                            multiple
                            onChange={() => {
                              const fd = new FormData();
                              const files = uploadFolderRef.current.files;
                              [...files].map((s) => {
                                fd.append('file', s);
                              });
                              fd.append('parentId', params.parentId);
                              batchUploadFile(fd).then((res) => {
                                _initTree();
                                _initfn();
                              });
                            }}
                          />
                        </span>
                      </div>
                    }
                    trigger="hover"
                  >
                    <div className={styles.upload}>
                      <img src={require('../img/add@2x.png')} alt="" />
                    </div>
                  </Popover>
                  <div
                    onClick={() => {
                      confirm({
                        title: '提示',
                        icon: <ExclamationCircleOutlined />,
                        content: `你确定要删除这项吗？`,
                        okText: '确定',
                        cancelText: '取消',
                        onOk() {
                          batchDelete({ id: currentSelectTreeId.id }).then(
                            (res) => {
                              message.success('删除成功');
                              params.parentId = currentResource.id;
                              getFileCount();
                              _initTree();
                              setParams({ ...params });
                            },
                          );
                        },
                      });
                    }}
                    className={styles.del_text}
                  >
                    删除
                  </div>
                </div>
                <Tree
                  switcherIcon={<CaretDownOutlined />}
                  showLine={true}
                  onSelect={treeSelect}
                  showIcon={true}
                  defaultExpandedKeys={['0-0-0']}
                  treeData={treeData}
                />
              </div>
            )}

            <div className={styles.file_pic_data}>
              <div className={styles.content_head}>
                <div className={styles.left}>
                  {!treeShow && (
                    <>
                      <div
                        className={styles.arrow_icon}
                        onClick={() => {
                          const _arr = [currentResource.id, ...historyParentId];
                          if (historyIndex === 0) {
                            params.parentId = _arr[0];
                            setParams({ ...params });
                            return;
                          }
                          historyIndex -= 1;
                          setHistoryIndex(historyIndex);
                          params.parentId = _arr[historyIndex];
                          setParams({ ...params });
                        }}
                      >
                        <ArrowLeftOutlined
                          style={{
                            fontSize: '14px',
                            color:
                              [currentResource.id, ...historyParentId]
                                .length === 1 || historyIndex === 0
                                ? '#888'
                                : '#fff',
                          }}
                        />
                      </div>
                      <div
                        onClick={() => {
                          const _arr = [currentResource.id, ...historyParentId];
                          if (historyIndex === _arr.length - 1) {
                            params.parentId = _arr[historyIndex];
                            setParams({ ...params });
                            return;
                          }
                          historyIndex += 1;
                          setHistoryIndex(historyIndex);
                          params.parentId = _arr[historyIndex];
                          setParams({ ...params });
                        }}
                        className={styles.arrow_icon}
                      >
                        <ArrowRightOutlined
                          style={{
                            fontSize: '14px',
                            color:
                              historyParentId.length === historyIndex
                                ? '#888'
                                : '#fff',
                          }}
                        />
                      </div>
                      <div
                        onClick={() => {
                          let _id;
                          if (currentSelectParentId.length > 1) {
                            _id = currentSelectParentId.splice(
                              currentSelectParentId.length - 1,
                            )[0];
                          } else {
                            _id = currentSelectParentId[0];
                          }
                          params.parentId = _id;
                          setParams({ ...params });
                        }}
                        className={styles.arrow_icon}
                      >
                        <ArrowUpOutlined
                          style={{
                            fontSize: '14px',
                            color:
                              currentSelectParentId.length === 1
                                ? '#888888'
                                : '#fff',
                          }}
                        />
                      </div>
                    </>
                  )}
                  <Popover
                    arrowPointAtCenter
                    placement="bottomLeft"
                    onVisibleChange={() => {
                      console.log(uploadFolderRef);
                      uploadFolderRef.current.setAttribute(
                        'webkitdirectory',
                        '',
                      );
                      uploadFolderRef.current.setAttribute('directory', '');
                      uploadFolderRef.current.setAttribute('multiple', '');
                    }}
                    content={
                      <div className={styles.upload_submit}>
                        <span onClick={() => addFileCommon(2)}>新建文件夹</span>{' '}
                        OR{' '}
                        <span>
                          上传文件夹{' '}
                          <input
                            ref={uploadFolderRef}
                            className={styles.upload_folder}
                            name="dir"
                            id="dir_input"
                            type="file"
                            multiple
                            onChange={() => {
                              const fd = new FormData();
                              const files = uploadFolderRef.current.files;
                              [...files].map((s) => {
                                fd.append('file', s);
                              });
                              fd.append('parentId', params.parentId);
                              batchUploadFile(fd).then((res) => {
                                _initTree();
                                _initfn();
                              });
                            }}
                          />
                        </span>{' '}
                        OR{' '}
                        <Upload
                          multiple={true}
                          onChange={() => {
                            _initfn();
                          }}
                          action="http://118.24.5.129:8102/wjgl/batchUploadHasInfo2"
                          data={{ parentId: params.parentId }}
                        >
                          <span>上传文件</span>
                        </Upload>
                      </div>
                    }
                    trigger="hover"
                  >
                    <div className={styles.upload}>
                      <img src={require('../img/add@2x.png')} alt="" />
                    </div>
                  </Popover>
                </div>
                <div className={styles.content_center}>
                  <div className={styles.right}>
                    <img
                      onClick={() => setBig(false)}
                      src={require('../img/small@2x.png')}
                      alt=""
                    />
                    <img
                      onClick={() => setBig(true)}
                      src={require('../img/big@2x.png')}
                      alt=""
                    />
                  </div>
                  <div className={styles.center_btn}>
                    {isDelBtn && (
                      <>
                        <span
                          onClick={() => {
                            if (deleteFileIds.length === 0) {
                              message.warning('回收站暂无可去永久清除的文件');
                              return;
                            }
                            confirm({
                              title: '提示',
                              icon: <ExclamationCircleOutlined />,
                              content: '你确定要永久删除所有项目吗？',
                              okText: '确定',
                              cancelText: '取消',
                              onOk() {
                                batchDeleteComplete({
                                  id: deleteFileIds.join(','),
                                }).then((res) => {
                                  _queryDelete();
                                  getFileCount();
                                  message.success('清空成功');
                                });
                              },
                            });
                          }}
                        >
                          清空
                        </span>
                        <span
                          onClick={() => {
                            batchRestore({ id: deleteFileIds.join(',') }).then(
                              (res) => {
                                _queryDelete();
                                getFileCount();
                                message.success('全部还原成功');
                              },
                            );
                          }}
                        >
                          全部还原
                        </span>
                        <span
                          onClick={() => {
                            if (_querySelectFileFolderIds().length === 0) {
                              message.warning('请至少选择一项');
                            }
                            batchRestore({
                              id: _querySelectFileFolderIds().join(','),
                            }).then((res) => {
                              _queryDelete();
                              getFileCount();
                              message.success('还原成功');
                            });
                          }}
                        >
                          还原
                        </span>
                      </>
                    )}
                    <span
                      onClick={() => {
                        if (_querySelectFileFolderIds().length === 0) {
                          message.warning('请至少选择一项');
                        }
                        if (isDelBtn) {
                          confirm({
                            title: '提示',
                            icon: <ExclamationCircleOutlined />,
                            content: `你确定要永久删除${
                              _querySelectFileFolderIds().length
                            }项吗？`,
                            okText: '确定',
                            cancelText: '取消',
                            onOk() {
                              batchDeleteComplete({
                                id: _querySelectFileFolderIds().join(','),
                              }).then((res) => {
                                _queryDelete();
                                getFileCount();
                                message.success('删除成功');
                              });
                            },
                          });
                          return;
                        }
                        confirm({
                          title: '提示',
                          icon: <ExclamationCircleOutlined />,
                          content: `你确定要删除${
                            _querySelectFileFolderIds().length
                          }项吗？`,
                          okText: '确定',
                          cancelText: '取消',
                          onOk() {
                            batchDelete({
                              id: _querySelectFileFolderIds().join(','),
                            }).then((res) => {
                              message.success('删除成功');
                              getFileCount();
                              _initfn();
                            });
                          },
                        });
                      }}
                    >
                      删除
                    </span>
                  </div>
                </div>
                <div>
                  {/* <Pagination
                    size="small"
                    showQuickJumper={{
                      goButton: <span className={styles.go_page}>Go</span>,
                    }}
                    hideOnSinglePage={true}
                    showSizeChanger={false}
                    total={1}
                  /> */}
                </div>
              </div>
              <div className={styles.folder}>
                <div className={styles.guide}>
                  <DownOutlined />
                  <span>子文件夹 {currentFolderData?.total}</span>
                </div>
                <div className={styles.file_list}>
                  {(currentFolderData?.list || []).map((f) => (
                    <div
                      key={f.id}
                      className={`${styles.file_list_content} ${
                        f.checked && styles.file_list_content_active
                      }`}
                      onClick={() => {
                        f.checked = !f.checked;
                        setCurrentFolderData({ ...currentFolderData });
                      }}
                      onDoubleClick={() => {
                        params.parentId = f.id;
                        setParams({ ...params });
                        let _ids = [...currentSelectParentId, f.id];
                        _ids = _ids.length > 2 ? _ids.slice(0, -1) : _ids;
                        console.log(_ids);
                        setCurrentSelectParentId([..._ids]);
                        setHistoryParentId([...historyParentId, f.id]);
                      }}
                    >
                      <img src={require('../img/file@2x.png')} />
                      <p>{f.fileName}</p>
                      {f.fileCount * 1 > 0 && f.folderCount * 1 > 0 && (
                        <p>
                          {f.fileCount} 文件+{f.folderCount} 文件夹
                        </p>
                      )}
                      {f.fileCount * 1 > 0 && !(f.folderCount * 1 > 0) && (
                        <p>{f.fileCount} 文件</p>
                      )}
                      {!(f.fileCount * 1 > 0) && f.folderCount * 1 > 0 && (
                        <p>{f.folderCount} 文件夹</p>
                      )}
                    </div>
                  ))}
                </div>
                <div className={styles.guide}>
                  <DownOutlined />
                  <span>文件 {currentFileData?.total}</span>
                </div>
                <div className={styles.img_list_container}>
                  {(currentFileData?.list || []).map((i) => (
                    <div
                      key={i.id}
                      className={`${styles.img_list} ${big && styles.big} ${
                        i.checked && styles.img_list_active
                      }`}
                      onClick={() => {
                        i.checked = !i.checked;
                        setCurrentFileData({ ...currentFileData });
                      }}
                      onDoubleClick={() => {
                        getFileImgDetail(i.id);
                      }}
                    >
                      <Popover trigger="hover" content={() => imgContent(i)}>
                        <div
                          className={`${styles.imgs} ${big && styles.big_img}`}
                        >
                          <img src={i.imgSaveName} alt="" />
                          <p>{i.fileName}</p>
                        </div>
                      </Popover>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.main_right}>
          <div className={styles.img_look}>
            <div className={styles.look_upload}>
              <img
                src={fileDetail[`imgSaveName${currentBtnIds}`]}
                className={styles.pic}
                alt=""
              />
              {imgIsEdit && (
                <Upload
                  multiple={true}
                  onChange={(e) => {
                    console.log(e);
                    if (e.file.status === 'done') {
                      const params = {
                        id: fileDetail.id,
                      };
                      if (currentBtnIds === 1) {
                        params.imgSaveName1 = e.file.response.data.fileName;
                      } else {
                        params.imgSaveName2 = e.file.response.data.fileName;
                      }
                      updateOnlyImg(params).then(() => {
                        message.success('更新成功');
                        getFileImgDetail(fileDetail.id);
                      });
                    }
                    console.log(e.file.name);
                  }}
                  action="http://118.24.5.129:8102/wjgl/uploadHasInfo"
                >
                  <span>上传文件</span>
                </Upload>
              )}
            </div>
            <div className={styles.btn}>
              <span
                onClick={() => {
                  setImgIsEdit(!imgIsEdit);
                }}
              >
                {!imgIsEdit ? (
                  <img src={require('../img/edit@2x.png')} alt="" />
                ) : (
                  <CloseCircleOutlined style={{ fontSize: '20px' }} />
                )}
              </span>
              <div className={styles.btn_list}>
                {[
                  { name: '缩略图', id: 1 },
                  { name: '预览图', id: 2 },
                ].map((k) => (
                  <div
                    key={k.id}
                    onClick={() => {
                      setCurrentBtnIds(k.id);
                    }}
                    className={`${styles.pic_btn} ${
                      currentBtnIds === k.id && styles.active
                    }`}
                  >
                    {k.name}
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className={styles.file_type}>
            <div className={styles.file_type_list}>
              <p>文件/夹名</p>
              <div className={styles.input}>
                <input
                  onChange={(e) => {
                    fileDetail.fileName = e.target.value;
                    setFileDetail({ ...fileDetail });
                  }}
                  value={fileDetail?.fileName}
                />
              </div>
              <div className={styles.save} onClick={updateFileDetailClk}>
                <img src={require('../img/icon-chk-on.png')} alt="" />
              </div>
              <div className={styles.reset}></div>
            </div>
            <div className={styles.file_type_list}>
              <p className={styles.border}>作者</p>
              <div className={styles.input}>
                <input
                  value={fileDetail?.authorName}
                  onChange={(e) => {
                    fileDetail.authorName = e.target.value;
                    setFileDetail({ ...fileDetail });
                  }}
                />
              </div>
              <div className={styles.save} onClick={updateFileDetailClk}>
                <img src={require('../img/icon-chk-on.png')} alt="" />
              </div>
              <div
                className={styles.reset}
                onClick={() => {
                  fileDetail.authorName = '';
                  setFileDetail({ ...fileDetail });
                }}
              >
                <img src={require('../img/del@2x.png')} alt="" />
              </div>
            </div>
            <div className={styles.file_type_list}>
              <p className={styles.border}>来源</p>
              <div className={styles.input}>
                <input
                  onChange={(e) => {
                    fileDetail.source = e.target.value;
                    setFileDetail({ ...fileDetail });
                  }}
                  value={fileDetail?.source}
                />
              </div>
              <div className={styles.save} onClick={updateFileDetailClk}>
                <img src={require('../img/icon-chk-on.png')} alt="" />
              </div>
              <div
                className={styles.reset}
                onClick={() => {
                  fileDetail.source = '';
                  setFileDetail({ ...fileDetail });
                }}
              >
                <img src={require('../img/del@2x.png')} alt="" />
              </div>
            </div>
            <div className={styles.file_type_list}>
              <p className={styles.border}>系列</p>
              <div className={styles.input}>
                <input
                  onChange={(e) => {
                    fileDetail.series = e.target.value;
                    setFileDetail({ ...fileDetail });
                  }}
                  value={fileDetail?.series}
                />
              </div>
              <div className={styles.save} onClick={updateFileDetailClk}>
                <img src={require('../img/icon-chk-on.png')} alt="" />
              </div>
              <div
                className={styles.reset}
                onClick={() => {
                  fileDetail.series = '';
                  setFileDetail({ ...fileDetail });
                }}
              >
                <img src={require('../img/del@2x.png')} alt="" />
              </div>
            </div>
            {customName.map((c, index) => (
              <div className={styles.file_type_list}>
                <p className={styles.border}>
                  <input
                    onChange={(e) => {
                      c.name = e.target.value;
                      setCustomName([...customName]);
                    }}
                    value={c.name}
                  />
                </p>
                <div className={styles.input}>
                  <input
                    onChange={(e) => {
                      c.value = e.target.value;
                      setCustomName([...customName]);
                    }}
                    value={c.value}
                  />
                </div>
                <div className={styles.save} onClick={updateFileDetailClk}>
                  <img src={require('../img/icon-chk-on.png')} alt="" />
                </div>
                <div
                  className={styles.reset}
                  onClick={() => {
                    customName.splice(index, 1);
                    setCustomName([...customName]);
                  }}
                >
                  <img src={require('../img/del@2x.png')} alt="" />
                </div>
              </div>
            ))}

            <div
              className={styles.add_type}
              onClick={() => {
                setCustomName([
                  ...customName,
                  { name: '自定义名称', value: '' },
                ]);
              }}
            >
              <img src={require('../img/icon-add.png')} alt="" />
              <span>添加属性</span>
            </div>
          </div>
          <div className={styles.file_tag}>
            <div className={styles.left}>
              <p onClick={addTags}>添加标签</p>
              <Space size={[2, 4]} wrap>
                {fileTags.map((l) => (
                  <Tag
                    key={l.id}
                    closable
                    onClose={() => {
                      deleteFileTag({
                        archiveId: fileDetail?.id,
                        propertyId: l.id,
                      });
                    }}
                  >
                    {l.propertyName}
                  </Tag>
                ))}
              </Space>
            </div>
            <div
              className={styles.right}
              onClick={() => {
                setIsTagsManage(true);
                setAddTagsVisible(true);
              }}
            >
              <img src={require('../img/tag@2x.png')} alt="" />
              <p>标签管理</p>
            </div>
          </div>
          <div className={styles.add_info}>
            <input
              defaultValue={fileDetail?.remarks}
              onBlur={() => {
                updateRemarks({
                  remarks: fileDetail.remarks,
                  id: fileDetail.id,
                }).then((res) => {
                  message.success('备注更新成功');
                });
              }}
              onChange={(e) => {
                fileDetail.remarks = e.target.value;
                setFileDetail({ ...fileDetail });
              }}
              placeholder="添加备注"
            />
          </div>
          <div className={styles.detail_info}>
            <p className={styles.title}>基本信息</p>
            <p className={styles._p}>
              <span>格式</span>
              <span>{fileDetail?.fileFormat}</span>
            </p>
            <p className={styles._p}>
              <span>尺寸</span>
              <span>{fileDetail?.fileSize}</span>
            </p>
            <p className={styles._p}>
              <span>大小</span>
              <span>{fileDetail?.fileWeight}</span>
            </p>
            <p className={styles._p}>
              <span>上传日期</span>
              <span>{fileDetail?.updateTimeFormatStr}</span>
            </p>
            <p className={styles._p}>
              <span>修改日期</span>
              <span>{fileDetail?.createTimeFormatStr}</span>
            </p>
          </div>
        </div>
      </div>
      {/* 搜索设置 */}
      <Modal
        wrapClassName="modal_search_set"
        visible={searchSetVisible}
        onCancel={searchHandleCancel}
        footer={null}
      >
        <Form initialValues={searchSetInitValue} onFinish={searchHandleOk}>
          <p className={styles.attribute_title}>属性</p>
          <Form.Item name="attributes">
            <Checkbox.Group>
              {searchAttributesOptions.map((item, index) => (
                <Checkbox key={index} value={item.value} disabled={index === 0}>
                  {item.label}
                </Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>
          <p className={styles.attribute_title_type}>标签</p>
          <Form.Item name="tags">
            <Checkbox.Group options={tagsOptions} />
          </Form.Item>
          <Form.Item>
            <div className={styles.btn}>
              <Button className={styles.sure} htmlType="submit">
                确定
              </Button>
              <Button className={styles.cancel} onClick={searchHandleCancel}>
                取消
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>
      {/* 筛选设置 */}
      <Modal
        wrapClassName="modal_search_set"
        visible={filterSetVisible}
        onCancel={filterSetCancel}
        footer={null}
      >
        <Form initialValues={selectFilterSet} onFinish={filterSetOk}>
          <p className={styles.attribute_title}>筛选显示</p>
          <Form.Item name="filterLevel">
            <Checkbox.Group>
              {filterLevelOptions.map((item, index) => (
                <Checkbox key={index} value={item.value} disabled={index === 0}>
                  {item.label}
                </Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>
          <p className={styles.attribute_title_type}>标签</p>
          <Form.Item name="tags">
            <Checkbox.Group options={tagsOptions2} />
          </Form.Item>
          <p className={styles.attribute_title_type}>基本信息</p>
          <Form.Item name="filterSetInfo">
            <Checkbox.Group options={filterSetInfoOptions} />
          </Form.Item>
          <Form.Item>
            <div className={styles.btn}>
              <Button className={styles.sure} htmlType="submit">
                确定
              </Button>
              <Button className={styles.cancel} onClick={filterSetCancel}>
                取消
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        wrapClassName="modal_filter_select"
        visible={filterSelectVisible}
        onCancel={filterSelectCancel}
        footer={null}
      >
        <div className="modal_filter_select_set" onClick={filterBackSet}>
          <SettingOutlined style={{ fontSize: '18px' }} />
        </div>
        <Form onFinish={filterSelectOk}>
          {(filterData || []).map((item, i) => (
            <>
              {selectFilterShowType.includes(item.propertyCode) && (
                <>
                  <p className={styles.attribute_title}>{item.propertyName}</p>
                  <Form.Item name={item.propertyCode}>
                    <Radio.Group>
                      {item.children.map((c) => (
                        <Radio
                          value={c.value}
                          onChange={() => {
                            // [{type: c.value, parentType: item.type, children: c.children || []}]
                            if (
                              c.children &&
                              c.children.length > 0 &&
                              selectFilterSet.filterLevel.includes('2')
                            ) {
                              if (selectFilterChildrenData.length === 0) {
                                selectFilterChildrenData.push({
                                  type: c.value,
                                  parentType: item.propertyCode,
                                  children: c.children || [],
                                });
                                setSelectFilterChildrenData([
                                  ...selectFilterChildrenData,
                                ]);
                                return;
                              }
                              if (
                                selectFilterChildrenData.filter(
                                  (l) => l.parentType === item.propertyCode,
                                ).length > 0
                              ) {
                                const _newData = selectFilterChildrenData.map(
                                  (k) => {
                                    if (k.parentType === item.propertyCode) {
                                      k.children = c.children || [];
                                      return k;
                                    }
                                  },
                                );

                                setSelectFilterChildrenData([..._newData]);
                                return;
                              }
                              selectFilterChildrenData.push({
                                type: c.value,
                                parentType: item.propertyCode,
                                children: c.children || [],
                              });
                              setSelectFilterChildrenData([
                                ...selectFilterChildrenData,
                              ]);
                            }
                          }}
                        >
                          {c.label}
                        </Radio>
                      ))}
                    </Radio.Group>
                  </Form.Item>
                  {selectFilterSet.filterLevel.includes('2') &&
                    selectFilterChildrenData.map((s) => {
                      if (s.parentType === item.propertyCode) {
                        return (
                          <Form.Item name={`${item.propertyCode}`}>
                            <div className={styles.children_group_radio}>
                              <Radio.Group>
                                {s.children.map((t) => (
                                  <Radio value={t.value}>{t.label}</Radio>
                                ))}
                              </Radio.Group>
                            </div>
                          </Form.Item>
                        );
                      }
                    })}
                </>
              )}
            </>
          ))}
          <Form.Item>
            <div className={styles.btn}>
              <Button className={styles.sure} htmlType="submit">
                确定
              </Button>
              <Button className={styles.cancel} onClick={filterSelectCancel}>
                取消
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        wrapClassName="tag_manage_class"
        title=""
        onCancel={closeTags}
        closable={false}
        visible={addTagsVisible}
        footer={null}
        width={746}
      >
        <div className={styles.tag_manage}>
          <div className={styles.tag_head}>
            <div className={styles.add_tag}>
              <PlusSquareOutlined style={{ fontSize: '20px' }} />
              <span>添加标签分类</span>
            </div>
            <div className={styles.tag_search}>
              <img src={require('../img/serch@2x.png')} alt="" />
              <input placeholder="搜索或新增标签" />
            </div>
            <div className={styles.right}>
              {isTagsManage && (
                <>
                  <div className={styles.toggle}>
                    <span>管理</span>
                    <DownOutlined />
                  </div>
                  <div className={styles.toggle}>
                    <span>载入标签</span>
                  </div>
                  <div
                    className={styles.toggle}
                    onClick={() => {
                      setIsTagsManage(false);
                    }}
                  >
                    <DownOutlined />
                    <span>收起</span>
                  </div>
                </>
              )}
              {!isTagsManage && (
                <>
                  <div
                    className={styles.tag_manage_entry}
                    onClick={() => {
                      setIsTagsManage(true);
                    }}
                  >
                    <img src={require('../img/tag@2x.png')} alt="" />
                    <span>标签管理</span>
                  </div>
                  <div
                    className={styles.toggle}
                    onClick={() => {
                      setIsTagsManage(true);
                    }}
                  >
                    <DownOutlined />
                    <span>全部展开</span>
                  </div>
                </>
              )}
              <div className={styles.close} onClick={closeTags}>
                <CloseOutlined />
              </div>
            </div>
          </div>
          <div
            style={{ display: isTagsManage && 'none' }}
            className={styles.tag_data}
          >
            {/* <div className={styles.history_tag}>
              <div className={styles.title_left}>
                <p className={styles.tag_title}>最近使用</p>
              </div>
              <div className={styles.tag_list}>
                <p>城市</p>
                <p>街道</p>
              </div>
            </div> */}
            <div className={styles.tag_list_classfig}>
              <div className={styles.left}>
                {tagsList.map((item, index) => (
                  <p
                    key={item.id}
                    className={currentTagIndex === index && styles.active_p}
                    onClick={() => {
                      setCheckedTag({
                        ...checkedTag,
                        [item.parentId]: checkedTag[item.parentId],
                      });
                      setCurrentTagIndex(index);
                    }}
                  >
                    <span>{item.propertyName}</span>
                    <PlusOutlined />
                  </p>
                ))}
              </div>
              {tagsList.length > 0 && (
                <div className={styles.right}>
                  <div className={styles.tag_list}>
                    {tagsList[currentTagIndex].children.map((t) => (
                      <>
                        {t.children.length === 0 && (
                          <p
                            className={
                              checkedTag[t.parentId] === t.id &&
                              styles.active_tag
                            }
                            onClick={() => {
                              setCheckedTag({
                                ...checkedTag,
                                [t.parentId]: t.id,
                              });
                              const _newTags = Object.values({
                                ...checkedTag,
                                [t.parentId]: t.id,
                              }).map((d) => {
                                const obj = {};
                                obj.propertyId = d;
                                return obj;
                              });
                              saveTagsFn(_newTags);
                            }}
                          >
                            {t.propertyName}
                            {checkedTag[t.parentId] === t.id && (
                              <span>
                                {' '}
                                <CheckOutlined
                                  style={{ color: '#fff', fontSize: '12px' }}
                                />
                              </span>
                            )}
                          </p>
                        )}
                      </>
                    ))}
                  </div>
                  {tagsList[currentTagIndex].children.map((t) => (
                    <>
                      {t.children.length > 0 && (
                        <div className={styles.have_children}>
                          <p
                            className={`${styles.children_title} ${styles.active_children}`}
                          >
                            <span>{t.propertyName}</span>
                            <DownOutlined />
                          </p>
                          <div className={styles.tag_list}>
                            {t.children.map((c) => (
                              <p
                                className={
                                  checkedTag[c.parentId] === c.id &&
                                  styles.active_tag
                                }
                                onClick={() => {
                                  setCheckedTag({
                                    ...checkedTag,
                                    [c.parentId]: c.id,
                                  });
                                  const _newTags = Object.values({
                                    ...checkedTag,
                                    [c.parentId]: c.id,
                                  }).map((d) => {
                                    const obj = {};
                                    obj.propertyId = d;
                                    return obj;
                                  });
                                  saveTagsFn(_newTags);
                                }}
                              >
                                {c.propertyName}
                                {checkedTag[c.parentId] === c.id && (
                                  <span>
                                    {' '}
                                    <CheckOutlined
                                      style={{
                                        color: '#fff',
                                        fontSize: '12px',
                                      }}
                                    />
                                  </span>
                                )}
                              </p>
                            ))}
                          </div>
                        </div>
                      )}
                    </>
                  ))}
                </div>
              )}
            </div>
          </div>
          <div
            style={{ display: !isTagsManage && 'none' }}
            className={styles.tag_data_2}
          >
            {tagsList.map((item) => (
              <div className={styles.history_tag}>
                <div
                  style={{ height: `${leftHeight}px` }}
                  className={styles.title_left}
                >
                  <p>
                    <span>{item.propertyName}</span>
                    <PlusOutlined />
                  </p>
                </div>
                <div ref={rightRef} className={styles.right}>
                  <div className={styles.tag_list}>
                    {item.children.map((s) => {
                      if (s.children.length === 0) {
                        return (
                          <p
                            className={
                              checkedTag[s.parentId] === s.id &&
                              styles.active_tag
                            }
                            onClick={() => {
                              setCheckedTag({
                                ...checkedTag,
                                [s.parentId]: s.id,
                              });
                              const _newTags = Object.values({
                                ...checkedTag,
                                [s.parentId]: s.id,
                              }).map((d) => {
                                const obj = {};
                                obj.propertyId = d;
                                return obj;
                              });
                              saveTagsFn(_newTags);
                            }}
                          >
                            {s.propertyName}
                            {checkedTag[s.parentId] === s.id && (
                              <span>
                                {' '}
                                <CheckOutlined
                                  style={{
                                    color: '#fff',
                                    fontSize: '12px',
                                  }}
                                />
                              </span>
                            )}
                          </p>
                        );
                      }
                    })}
                  </div>
                  {item.children.map((s) => {
                    if (s.children.length > 0) {
                      return (
                        <div className={styles.have_children}>
                          <p className={`${styles.children_title}`}>
                            <span>{s.propertyName}</span>
                          </p>
                          <div className={styles.tag_list}>
                            {s.children.map((l) => (
                              <p
                                className={
                                  checkedTag[l.parentId] === l.id &&
                                  styles.active_tag
                                }
                                onClick={() => {
                                  setCheckedTag({
                                    ...checkedTag,
                                    [l.parentId]: l.id,
                                  });
                                  const _newTags = Object.values({
                                    ...checkedTag,
                                    [l.parentId]: l.id,
                                  }).map((d) => {
                                    const obj = {};
                                    obj.propertyId = d;
                                    return obj;
                                  });
                                  saveTagsFn(_newTags);
                                }}
                              >
                                {l.propertyName}
                                {checkedTag[l.parentId] === l.id && (
                                  <span>
                                    {' '}
                                    <CheckOutlined
                                      style={{
                                        color: '#fff',
                                        fontSize: '12px',
                                      }}
                                    />
                                  </span>
                                )}
                              </p>
                            ))}
                          </div>
                        </div>
                      );
                    }
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Modal>
    </>
  );
};
